<template>
  <view class="goods-info-container">
    <!-- 商品基本信息 -->
    <view class="info-section">
      <view class="section-title">商品信息</view>
      <view class="info-item">
        <text class="info-label">商品名：</text>
        <text class="info-value">{{ goodsInfo.goods_name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">品牌：</text>
        <text class="info-value">{{ goodsInfo.brand.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品分类：</text>
        <text class="info-value">{{ goodsInfo.category.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品单位：</text>
        <text class="info-value">{{ goodsInfo.unit }}</text>
      </view>
    </view>

    <!-- 商品规格表 -->
    <view class="info-section">
      <view class="section-title">商品规格</view>
      <view class="spec-table">
        <view class="table-header">
          <view
            class="table-cell"
            v-for="(header, index) in tableHeaders"
            :key="index"
          >
            {{ header }}
          </view>
        </view>
        <view
          class="table-row"
          v-for="(row, rowIndex) in skuTableData"
          :key="rowIndex"
        >
          <view
            class="table-cell"
            v-for="(header, colIndex) in tableHeaders"
            :key="colIndex"
          >
            {{ row[header] }}
          </view>
        </view>
      </view>
    </view>

    <!-- 折扣比例 -->
    <view class="info-section">
      <view class="section-title flex-jw">
        <span>通用折扣</span>
        <view style="display: flex; gap: 10rpx">
          <view class="edit-btn" @click="cancel" v-if="isEditDiscount"
            >取消</view
          >
          <view class="edit-btn" @click="submitDiscount">{{
            isEditDiscount ? "保存" : "编辑"
          }}</view>
        </view>
      </view>
      <view class="discount-list">
        <view
          class="info-item"
          v-for="(item, index) in goodsInfo.discount_list"
        >
          <text class="info-label">折扣{{ index + 1 }}：</text>
          <text class="info-value" v-if="!isEditDiscount">{{
            item.discount
          }}</text>
          <input
            v-else
            v-model="item.discount"
            type="digit"
            class="discount-input"
            placeholder="输入0.01-1"
          />
        </view>
      </view>
    </view>

    <!-- 商品封面图片 -->
    <view class="info-section">
      <view class="section-title">封面图片</view>
      <view class="image-container">
        <image
          class="cover-image"
          :src="goodsInfo.cover"
          mode="aspectFit"
          @tap="previewImage(index, 'cover')"
        ></image>
      </view>
    </view>

    <!-- 商品相册图片 -->
    <view class="info-section">
      <view class="section-title">相册图片</view>
      <view class="gallery-container">
        <image
          v-for="(image, index) in goodsInfo.detail_img"
          :key="index"
          :src="image"
          class="gallery-image"
          mode="aspectFit"
          @tap="previewImage(index, 'detail_img')"
        ></image>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="info-section" style="padding: 0">
      <view class="section-title" style="padding: 20rpx">商品详情</view>
      <view class="rich-text-container">
        <mp-html :content="goodsInfo.detail"></mp-html>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getGoodsDetail,
  getGoodsDiscount,
  setGoodsDiscount,
} from "@/apiShop/goods";
import { onLoad } from "@dcloudio/uni-app";
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";

// 商品基本信息
const goodsInfo = ref({
  product_name: "",
  goods_name: "",
  brand: "",
  category: "",
  goods_sku_data: [],
  set_discount: [],
});

// 表格表头
const tableHeaders = ref([]);
// SKU表格数据
const skuTableData = ref([]);

// 预览图片
const previewImage = (index, type = "cover") => {
  if (type === "cover")
    return uni.previewImage({
      current: 0,
      urls: [goodsInfo.value.cover],
    });
  uni.previewImage({
    current: index,
    urls: goodsInfo.value.detail_img,
  });
};

// 生成规格表格数据
const generateTableData = (data) => {
  let arr = [];
  data.forEach((item) => {
    let obj = {};
    let skuName = item.goods_spec_value_name.split(",");
    tableHeaders.value.forEach((header, index) => {
      obj[header] = skuName[index];
    });
    obj["销售价"] = item.sales_price || "";
    arr.push(obj);
  });
  return arr;
};

const getGoodsDetailData = async (id) => {
  const res = await getGoodsDetail({ id });
  goodsInfo.value = res;
  if (res.sku.length > 0) {
    tableHeaders.value = [...res.sku[0].goods_spec_name.split(","), "销售价"];
    // 初始化表格数据
    skuTableData.value = generateTableData(res.sku);
  }
};

const getGoodsDiscountData = async (id) => {
  const res = await getGoodsDiscount({ shop_goods_id: id });
  goodsInfo.value.discount_list = res;
};

const isEditDiscount = ref(false);
const cancel = async () => {
  isEditDiscount.value = false;
  await getGoodsDiscountData(goodsInfo.value.id);
};

const submitDiscount = async () => {
  isEditDiscount.value = !isEditDiscount.value;
  if (!isEditDiscount.value) {
    let del_ids = [];
    goodsInfo.value.discount_list.forEach((item) => {
      if (item.discount == 0 && item.id != 0) {
        del_ids.push(item.id);
      }
    });
    const res = await setGoodsDiscount({
      discount_list: goodsInfo.value.discount_list,
      del_ids,
    });
    await getGoodsDiscountData(goodsInfo.value.id);
  }
};
onLoad(async (options) => {
  await getGoodsDetailData(options.id);
  await getGoodsDiscountData(options.id);
});
</script>

<style scoped lang="scss">
.goods-info-container {
  /* padding-bottom: 100rpx; */
  background-color: #f5f5f5;
}

/* 信息区域通用样式 */
.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #409eff;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #eee;
  padding-bottom: 10rpx;
}

.info-item {
  display: flex;
  padding: 10rpx 0;
}

.info-label {
  width: 150rpx;
  font-family: "黑体", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26rpx;
}

.info-value {
  flex: 1;
  font-family: "黑体", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28rpx;
  color: #7f7f7f;
}

/* 规格表格样式 */
.spec-table {
  border: 1px solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f6f6f6;
  border-bottom: 1px solid #ddd;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-cell:last-child {
  border-right: none;
}

/* 折扣设置样式 */
.discount-item {
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #eee;
}

.discount-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.discount-specs {
  display: flex;
  flex-wrap: wrap;
}

.discount-spec {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  font-size: 26rpx;
  color: #666;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 20rpx;
}

.action-btn {
  width: 80rpx;
  height: 80rpx;
  background-color: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.translate-btn {
  background-color: #1989fa;
}

/* 图片样式 */
.image-container {
  display: flex;
  justify-content: start;
  margin: 20rpx 0;
}

.cover-image {
  width: 300rpx;
  height: 300rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx 0;
}

.gallery-image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

/* 富文本样式 */
.rich-text-container {
  padding: 10rpx 0;
}
.discount-list {
  display: flex;
  flex-wrap: wrap;
  & .info-item {
    display: flex;
    padding: 10rpx 0;
    width: 41%;
    align-items: center;
  }
  & .info-label {
    width: 95rpx;
    font-family: "黑体", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 26rpx;
  }
  & .discount-input {
    flex: 1;
    border-bottom: 0.5px solid #dcd7d7;
    margin-right: 40rpx;
  }
}
.flex-jw {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  & .edit-btn {
    border-bottom: 1rpx solid #409eff;
  }
}
</style>
